<template>
  <div>
   <div>
     <router-link to="/home/workplace">
          <i class="iconfont icon-back"></i>
    </router-link>
     <div class="teaminfo"><el-collapse v-model="activeNames" @change="handleChange">
    <el-collapse-item :title="checkTeamInfo.name" name="1">
    <div>团队名称:{{checkTeamInfo.name}}</div>
    <div >创建者&nbsp;&nbsp;&nbsp;:{{ checkTeamInfo.creator_name }}</div>
    <div >成员数量:{{ checkTeamInfo.member_count }}</div>
    <div class="text item">{{ checkTeamInfo.intro }}</div>
  </el-collapse-item>
  
</el-collapse>

</div>
      <el-button type="primary" @click="createTeamArticle" class="button-create">创建文档</el-button>
      <el-button type="danger" @click="handleQuit" class="button-diss">退出团队</el-button>
   </div>
   <hr>

    <el-row>
      <el-col :span="2" v-for="(teamArticleItem, index) in teamArticleList" :key="index" :offset="index%8==0?0:1">
        <el-card :body-style="{ padding: '0px' }" shadow="hover" style="margin-bottom: 20px; -webkit-transition-duration:0.3s; -webkit-transition-timing-function:linear; -webkit-transition-delay:0.01s;">
          <TeamArticle :teamArticleItem="teamArticleItem"/>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>

import Member from '../../components/Member'
import TeamArticle from '../../components/TeamArticle'
import {mapState,mapActions} from 'vuex'
import {reqExitTeam,reqOutTeam,reqOutTeamMessage,reqSearchInviteUser,reqInviteUser} from '../../api'
export default {
  name: 'Created',
  components: {Member,TeamArticle},
  data() {
    return {
      drawer: false,
      direction: 'rtl',
      currentDate: new Date(),
      title:""
    };
  },
  computed:{
    ...mapState(['userInfo','checkTeamInfo','checkTeamMemberList','teamArticleList','otherUserInfo']),
  },
  mounted(){
      console.log(this.checkTeamInfo)
      console.log('----')
      console.log(this.userInfo.userid)
      this.getTeamArticle(this.checkTeamInfo.tid)
      console.log('aaa')
      console.log(this.teamArticleList)
      //this.getTeamMemberInfo(this.checkTeamInfo)
  },
  methods: {
    ...mapActions(['getTeamArticle','getMyCreateTeam','getMyTeam','getTeamInfo','getTeamMemberInfo',
      'getOtherUserInfo']),
    handleClose(done) {
      this.$confirm('管理完成！')
        .then(_ => {
          done();
          this.drawer=false;
        })
        .catch(_ => {
          this.drawer=true;
        });
    },
    async handleQuit() {
        //解散团队:teamid
        if(this.checkTeamInfo) {
          //我创建\加入的团队列表减少一个团队
          console.log(this.checkTeamInfo)
          console.log(this.userInfo.userid)
          console.log(this.checkTeamInfo.tid)
          const result=await reqExitTeam(this.checkTeamInfo.tid,this.userInfo.userid)

          console.log(result)
         // console.log(result)
          //重新获取创建团队列表
          this.getMyTeam()
          //重新获取加入团队列表
       //   this.getMyTeam()
          if(result.error_code===0) {
            this.$router.back(),
            this.$message({
            type: 'success',
            message: '成功退出团队!'
             });
            setTimeout(() => {
              this.getMyTeam()
            //  this.getMyTeam()
            }, 200)

          }
          else{
            alert("未能成功退出团队")
            return
          }
        }
        this.$router.back()
      
    },
    //删除团队成员reqOutTeam(踢人)

    createTeamArticle(){
    this.$router.replace('/teamedit')
    console.log(this.checkTeamInfo)
    console.log(this.teamArticleList)
    
    }
  }
}
</script>

<style>
a{
  text-decoration: none;

}
.teaminfo{
  width: 200px;
  height: 70px;
  margin-top: 20px;
  margin-left: 200px;

}

.button-diss{
  position: absolute;
  top:40px;
  right: 30px;
}
.button-create{
  position: absolute;
  top:40px;
  right: 150px;
}
.el-drawer.rtl {
  overflow-y: scroll
}
.memdelete{
  opacity:0;
}
li{
  margin: 10px;
  padding: 5px;
  vertical-align: center;
}
li:hover{
  color: #409EFF;
}
li:hover .memdelete{
  opacity: 1;
}
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: 100%;
  display: block;
  margin-top: 8px;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
.box {
  width: 400px;
}
.top {
  text-align: center;
}

.left {
  float: left;
  width: 60px;
}

.right {
  float: right;
  width: 60px;
}

.bottom {
  clear: both;
  text-align: center;
}

/*.item {*/
/*  margin: 4px;*/
/*}*/

.left .el-tooltip__popper,
.right .el-tooltip__popper {
  padding: 8px 10px;
}
.text {
  /*font-size: 16px;*/
  /*letter-spacing: 2px;*/
}

.item {
  margin-bottom: 18px;
}
</style>

